<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
 <HEAD>
  <TITLE>Ext.grid.feature.RowBody示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
    /*定义行体样式*/
  	.rowbodyColor{
  		background-color : #FFFFCC;
  	}
  </style>
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		//创建表格数据
		var datas = [
			['张三',2500,'张三的个人简历...'],
			['李四',1500,'李四的个人简历...']
		];
		//创建Grid表格组件
		Ext.create('Ext.grid.Panel',{
			title : 'Ext.grid.feature.RowBody示例',
			renderTo: Ext.getBody(),
			width:300,
			height:150,
			frame:true,
			store: {
		        fields: ['name','salary','introduce'],
		        proxy: {
		            type: 'memory',
		            data : datas,
		            reader : 'array'//Ext.data.reader.Array解析器
		        },
		        autoLoad: true
		    },
		    features: [Ext.create('Ext.grid.feature.RowBody',{
		        getAdditionalData: function(data, idx, record, orig) {
		            var headerCt = this.view.headerCt,
		                colspan  = headerCt.getColumnCount();//获取表格的列数

		            return {
		                rowBody: record.get('introduce'),//指定行体内容
		                rowBodyCls: 'rowbodyColor',//指定行体样式
		                rowBodyColspan: colspan//指定行体跨列的列数
		            };
		        }
		    })],
			columns: [//配置表格列
			    Ext.create('Ext.grid.RowNumberer',{text : '行号', width : 35}),
				{header: "姓名", flex: 1, dataIndex: 'name'},
				{header: "薪资", flex: 1, dataIndex: 'salary'}
			]
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px"></BODY>
</HTML>